<template>
    <Base title="缺陷统计">
        <div class="pageMain">
            <div style="width: 100%; height: 80%;" id="mainChart"></div>
            <div class="bottomBox">
                <div class="itemBox">
                    <div class="item-top">
                        <div class="itemCheck redBck" />
                        <div class="itemText">危急</div>
                    </div>
                    <div class="itemNum red">0</div>
                </div>
                <div class="itemBox">
                    <div class="item-top">
                        <div class="itemCheck orangeBck" />
                        <div class="itemText">严重</div>
                    </div>
                    <div class="itemNum orange">10</div>
                </div>
                <div class="itemBox">
                    <div class="item-top">
                        <div class="itemCheck yellowBck" />
                        <div class="itemText">一般</div>
                    </div>
                    <div class="itemNum yellow">0</div>
                </div>
            </div>
        </div>
    </Base>
  </template>
  
  <script setup>
    import * as echarts from 'echarts';
    import { onMounted, ref } from 'vue'
    import Base from '@/components/base/base.vue'

    onMounted(() => {
        var chartDom = document.getElementById('mainChart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '50%'],
                    radius: '15%',
                    startAngle: 360,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#76e2ee'
                    },
                    progress: {
                        show: false,
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                            lineStyle: {
                            width: 1,
                            color: '#434e71'
                        }
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        borderRadius: 8,
                        offsetCenter: [0, 0],
                        fontWeight: 'bolder',
                        color: '#fff',
                        formatter: [
                            '{a|缺陷总数}',
                            '{b|{value}}'
                        ].join('\n'),

                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 12,
                                lineHeight: 40
                            },
                            b: {
                                color: '#fff',
                                fontSize: 24,
                                fontWeight: 500,
                            },
                        }
                    },
                    data: [
                        {
                            value: 20
                        }
                    ]
                },
                {
                    color: [
                        'rgba(241, 1, 66, 0.8)',
                        'rgba(255, 70, 57, 0.8)',
                        'rgba(250, 192, 56, 0.8)'
                    ],
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#080c1b',
                        borderWidth: 5
                    },
                    label: {
                        show: true,
                        formatter: '\n\r  {b}  \n{hr|}\n \n \r {d}%',
                        color: 'inherit',
                        rich: {
                        a: {
                            left: 20
                        },

                        hr: {
                            height: 5,
                            width: 5,
                            backgroundColor: 't',
                            lineHeight: 5,
                            marginBottom: 20,
                            padding: [0, -5],
                            borderRadius: 5,
                            marginLeft: 20
                            // backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
                        }
                        }
                    },
                    emphasis: {
                        disabled: true
                    },
                    labelLine: {
                        show: true,
                        length: 0,
                        length2: 50,
                        lineStyle: {
                            cap: 'round'
                        },
                    },
                    data: [
                        { value: 1048, name: '危急' },
                        { value: 735, name: '严重' },
                        { value: 580, name: '一般' }
                    ]
                },
                {
                    name: '1',
                    type: 'pie',
                    radius: ['54%', '55%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#40486A',
                        borderWidth: 0
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        disabled: true,
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 1048,
                            name: 'Search Engine',
                            itemStyle: { color: 'rgba(51, 60, 90, 0.8)' }
                        }
                    ]
                },
            ]
            };


        option && myChart.setOption(option);
    })
  </script>
  
  <style lang="scss" scoped>
  .pageMain {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .bottomBox {
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .itemBox {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .item-top {
                    display: flex;
                    align-items: center;
                    .itemCheck {
                        width: 12px;
                        height: 12px;
                        border-radius: 2px 2px 2px 2px;
                        margin-bottom: 3px;
                        margin-right: 6px;
                    }
                    .itemText {
                        font-size: 12px;
                        color: #fff;
                    }
                }
                .itemNum {
                    margin-top: 10px;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
        .red {
            color: #F10142;
        }
        .orange {
            color: #FF4639;
        }
        .yellow {
            color: #FAC038;
        }
        .redBck {
            background-color: #F10142;
        }
        .orangeBck {
            background-color: #FF4639;
        }
        .yellowBck {
            background-color: #FAC038;
        }
  }
  
  </style>
  